<template>
    <!-- pages/wallet/withdraw/index.wxml -->
    <view>
        <view class="header">
            <!-- <image class="ydbg" src="{{imgUrl + 'my-bg.png'}}"></image> -->
            <view class="bytext">
                <view>可提现金额</view>
                <view>¥{{ accountObj.realBalance }}</view>
            </view>
        </view>
        <view class="withdrawbox">
            <view class="withtext1">提现金额</view>
            <view class="centers mt-40">
                <view class="withtext2">¥</view>
                <input :value="money" @input="getinput" class="widthinput" type="number" />
                <view class="withtext3" @tap.stop.prevent="getAll">全部提现</view>
            </view>
            <view class="hrs mt-30"></view>
            <view class="flexbox-sb mt-20">
                <view class="withtext4">提现至</view>
                <view class="centers" @tap="addCard" v-if="!bank">
                    <text class="withtext4">选择银行卡</text>
                    <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                </view>
                <view class="centers" v-if="bank" @tap="addCard">
                    <text class="withtext4">{{ bank.typeName }}</text>
                    <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="flexbox-sb mt-28">
                <view></view>
                <view class="withtext5">提现手续费1元</view>
            </view>
            <view class="withbtn mt-40" @tap="onPay">确认入账</view>
        </view>
        <view class="detailbox">
            <!-- <view class="centers box1">
      <view class="xian"></view>
      <text class="box1text1">提现明细</text>
      <view class="xian"></view>
    </view> -->
            <view class="flexbox-sb centers box3" @tap="onDetails">
                <view class="centers">
                    <image class="icon-40 mr-10" :src="imgUrl + 'wallet.png'"></image>
                    <text class="box1text3">提现明细</text>
                </view>
                <view>
                    <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="flexbox-sb box2" v-if="index < 4" v-for="(item, index) in cashInfoList" :key="index">
                <view>
                    <view class="box2text1">{{ item.remark }}</view>
                    <view>
                        <text class="box2text2">{{ item.createtime }}</text>
                        <!-- <text class="box2text2">12:00:03</text> -->
                    </view>
                </view>

                <view class="box2text3">+{{ item.changebalance }}</view>
            </view>
        </view>

        <!-- 弹出密码输入 -->
        <van-overlay :show="showpay" @tap.native="onClickHide" z-index="99">
            <view class="overlaybox">
                <view class="pab"><van-icon @click="onClickHide" size="20px" name="cross" /></view>
                <view class="tit">请输入密码</view>
                <view class="tit1">提现金额</view>
                <view class="tit2">¥{{ money }}</view>
                <view class="hrs"></view>
                <padinput :Value="value" id="padinput" @infotan="getpassword($event, { tagId: 'padinput' })" :bool="true" :isFocus="isFocus"></padinput>
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/wallet/withdraw/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            accountObj: null,

            money: '',
            cashInfoList: [],
            bank: null,
            walInfo: null,
            showpay: false,
            password: '',
            value: '',
            isFocus: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 提现信息 大小限制
        _request
            .get('/wallet/getWithdrawalInfo', {})
            .then((res) => {
                this.setData({
                    walInfo: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });

        this.onCommont();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 提现全部金额
        getAll() {
            this.setData({
                money: this.accountObj.realBalance
            });
        },

        // 提现金额
        getinput(e) {
            let value = e.detail.value;

            if (e.detail.value.substr(0, 1) == 0 && value.length == 1) {
                value = value.replace(/[^0-9-]+/, '');

                if (value < 1) {
                    value = 1;
                }

                this.setData({
                    money: value
                });
            } else {
                this.setData({
                    money: e.detail.value
                });
            }
        },

        // 提现明细
        onDetails() {
            uni.navigateTo({
                url: '/pages/wallet/txdetails/index'
            });
        },

        // 过滤
        validateNumber(val) {
            return val.replace(/\D/g, '');
        },

        // 添加银行卡
        addCard() {
            uni.navigateTo({
                url: '/pages/wallet/bankcardmanagement/index'
            });
        },

        // 提现
        onWith() {
            // 钱包提现
            if (this.getRule()) {
                _request
                    .postObj('/wallet/toCash', {
                        userId: uni.getStorageSync('userid'),
                        accountId: this.bank.id,
                        money: this.money,
                        toCashVersion: 1
                    })
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.onCommont();
                            this.setData({
                                money: '',
                                showpay: false
                            });
                            uni.showModal({
                                title: '提现成功',
                                content: '预计三个工作日内到账',
                                showCancel: false
                            });
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }
        },

        //确认入账
        onPay() {
            this.checkPassWord();
        },

        // 取消输入密码
        onClickHide() {
            this.setData({
                showpay: false
            });
        },

        // 获取密码
        getpassword(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            this.setData({
                password: e.detail.inputValue
            });

            if (this.password.length == 6) {
                _request
                    .postObj('/settings/checkPayWord', {
                        payWord: this.password,
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        this.setData({
                            password: ''
                        });

                        if (res.data.code === 200) {
                            this.onWith();
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
            }
        },

        //检测是否已经设置支付密码
        checkPassWord() {
            _request
                .get('/settings/initPayWord', {
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.message == '支付密码还未设置' && res.data.data == 0) {
                        this.setData({
                            showpay: false
                        });
                        uni.showModal({
                            title: '您还未设置密码',
                            content: '请先设置密码',
                            confirmText: '前往设置',

                            success(res) {
                                if (res.confirm) {
                                    uni.navigateTo({
                                        url: '/pages/setpaypassword/index'
                                    });
                                } else if (res.cancel) {
                                }
                            }
                        });
                    } else if (res.data.message == '支付密码已设置' && res.data.data == 1) {
                        if (this.getRule()) {
                            this.setData({
                                showpay: true
                            });
                        }
                    }
                });
        },

        //验证提现数额 最大两万，最小100
        getRule() {
            const { walInfo, money } = this;
            const { maxWithdrawal, minWithdrawal } = walInfo;

            if (Number(maxWithdrawal) > Number(money) >= Number(minWithdrawal) && this.bank) {
                return true;
            } else if (Number(maxWithdrawal) < Number(money) && this.bank) {
                uni.showToast({
                    title: '提现金额不能大于' + maxWithdrawal,
                    icon: 'none'
                });
                return false;
            } else if (Number(minWithdrawal) > Number(money) && this.bank) {
                uni.showToast({
                    title: '提现金额不能小于' + minWithdrawal,
                    icon: 'none'
                });
                return false;
            } else if (!this.bank) {
                uni.showToast({
                    title: '请选择银行卡',
                    icon: 'none'
                });
                return false;
            } else {
                return true;
            }
        },

        onCommont() {
            // 获取余额
            _request
                .get('/wallet/getCashInfo', {
                    id: uni.getStorageSync('userid'),
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        accountObj: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                }); // 用户钱包提现明细

            _request
                .get('/wallet/toCashInfoList', {
                    date: '',
                    pageNo: 1,
                    pageSize: 10,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        cashInfoList: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/wallet/withdraw/index.wxss */
/* 顶部 */
.ydbg {
    width: 100%;
    height: 300rpx;
}

.bytext {
    position: absolute;
    top: 60rpx;
    left: 40rpx;
}

.header {
    width: 750rpx;
    height: 300rpx;
    background: linear-gradient(360deg, #ff8722 0%, #ffbc47 100%);
}

.bytext view:nth-child(1) {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 40rpx;
}

.bytext view:nth-child(2) {
    font-size: 40rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 80rpx;
    margin-top: 20rpx;
}

/* 提现 */

.withdrawbox {
    width: 710rpx;
    height: 528rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-radius: 5px;
    margin: 0rpx 20rpx 0 20rpx;
    position: relative;
    top: -70rpx;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
}

.withbtn {
    width: 670rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
}

.widthinput {
    font-size: 60rpx;
    width: 500rpx;
    height: 84rpx;
    font-size: 60rpx;
    line-height: 84rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}

.withtext1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
}

.withtext2 {
    height: 84rpx;
    font-size: 60rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 84rpx;
}

.withtext3 {
    height: 40rpx;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 40rpx;
}

.withtext4 {
    height: 40rpx;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.withtext5 {
    height: 34rpx;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

/* 明细 */
.detailbox {
    width: 710rpx;
    margin: 0rpx 20rpx 0 20rpx;
    padding: 0 20rpx 60rpx 20rpx;
    box-sizing: border-box;
    /* background: #FFFFFF; */
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    position: relative;
    top: -70rpx;
}

.box1 {
    height: 124rpx;
    border-bottom: 1px solid #ededed;
    justify-content: center;
}

.box3 {
    height: 124rpx;
    border-bottom: 1px solid #ededed;
}

.box1text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.xian {
    width: 120rpx;
    height: 2rpx;
    background: #bebebe;
}

.box1text1 {
    margin: 0 20rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 50rpx;
}

.hrs {
    margin: 10rpx 0 20rpx 0;
}

.overlaybox {
    position: absolute;
    bottom: 0rpx;
    background: #ffffff;
    padding: 40rpx 20rpx;
    width: 650rpx;
    top: 20%;
    height: 460rpx;
    margin: 0 auto;
    left: 0;
    box-sizing: border-box;
    right: 0;
    border-radius: 10rpx;
    z-index: 999;
}

.tit {
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
}

.tit1 {
    width: 100%;
    text-align: center;
    font-size: 20rpx;
}

.tit2 {
    width: 100%;
    text-align: center;
    font-size: 40rpx;
    margin-bottom: 40rpx;
}

.p-20 {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
}
</style>
